<template>
  <button
    type="button"
    class="vw-button"
    :class="[
      'vw-button--' + type,
      buttonSizeClass,
      {
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle,
        'is-disabled': disable,
        'is-loading': loading
      }
    ]"
    @click="handleClick"
  >
    <i v-if="loading" class="vw-icon-loading"></i>

    <i v-if="!loading && icon" :class="icon"></i>
    <span v-if="$slots.default">
      <slot></slot>
    </span>
  </button>
</template>

<script>
  export default {
    name: 'VwButton',
    props: {
      type: {
        default: 'default',
        type: String
      },
      plain: {
        type: Boolean
      },
      round: {
        type: Boolean
      },
      circle: {
        type: Boolean
      },
      disable: {
        type: Boolean
      },
      loading: {
        type: Boolean
      },
      icon: {
        type: String
      },
      size: {
        type: String,
        validator: function(value) {
          // 这个值必须匹配下列字符串中的一个
          return ['medium', 'small', 'mini', 'tiny'].indexOf(value) !== -1
        }
      }
    },
    computed: {
      buttonSizeClass: function() {
        if (this.size) {
          return 'vw-button--' + this.size
        }
        return null
      }
    },
    methods: {
      handleClick: function(event) {
        if (this.$props.disable) {
          return
        }
        this.$emit('click', event)
      }
    }
  }
</script>

<style lang="scss">
  @import './../../theme/src/button.scss';
</style>
